<template>
  <div class="code-mirror">
    <el-button
      :icon="icon"
      type="text"
      @click="showCode = true"
    />
    <el-drawer
      title="CodeMirror"
      :visible.sync="showCode"
      class="adjust-drawer"
    >
      <el-container>
        <el-header
          v-if="title"
          height="auto"
        >
          {{ title }}
        </el-header>
        <el-main class="p-0">
          <el-scrollbar
            style="height:100%"
            wrap-style="overflow-x:hidden;"
          >
            <div id="codeView">
              <pre v-highlight><code v-html="codeHtml" /></pre>
            </div>
          </el-scrollbar>
        </el-main>
        <el-footer height="auto">
          <el-button @click="showCode = false">关闭</el-button>
        </el-footer>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'CodeMirror',
  props: {
    code: {
      type: [String, Object, Array],
      default: null
    },
    icon: {
      type: String,
      default: 'em-icon-script'
    },
    title: {
      type: String,
      default: 'CodeMirror'
    }
  },
  data() {
    return {
      showCode: false,
      saving: false,
      activeIndex: undefined
    }
  },
  computed: {
    codeHtml() {
      return this.code
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss">
</style>
